import { useState,  useRef } from 'react'
import { Button, Drawer,InputNumber, Radio, Space, Table } from 'antd';
import PanelLeft from '../../../../../../../common/PanelLeft';
import { resourcePath } from '../../../../../../../../utils/resource';
import JcyjApi from '../../../../../../../../utils/apis/JcyjApi';
import Yy from '../Yy';
import Xx from '../Xx';
import Jms from '../Jms/index.js';


export default function Yxfx(props) {

    const [datas, setDatas] = useState();
    const [total, setTotal] = useState();
    const [params, setParams] = useState();

    useState(() => {
        JcyjApi.Yxfx_findby(params).then(resp => {
            setDatas(resp.data);
            setTotal(resp.data2?.totalsize);
        });
    },[params])

    const [radius, setRadius] = useState();

    const [a,seta] = useState(false)
    

    //医院
    const [openYy, setOpenYy] = useState(false);
    const showDrawerYy = () => {
      setOpenYy((openYy)=>{
        if(!openYy){handleCheckboxChange('option3'); return true;}
        else {handleCheckboxChange('null');return false;}
      });
      
     
       //取消额外组件显示
       setOpenXx(false)
       setOpenJms(false)
    };
    const onCloseYy = () => {
      setOpenYy(false);
    };

    //学校
    const [openXx, setOpenXx] = useState(false);
    const showDrawerXx = () => {
      setOpenXx((openXx)=>{
        if(!openXx){handleCheckboxChange('option2'); return true;}
        else {handleCheckboxChange('null');return false;}
      });
      
      //取消额外组件显示
      setOpenYy(false)
      setOpenJms(false)
    };
    const onCloseXx = () => {
      setOpenXx(false);
    };

    //居民所
    const [openJms, setOpenJms] = useState(false);
    const showDrawerJms = () => {
      setOpenJms((openJms)=>{
        if(!openJms){handleCheckboxChange('option1'); return true;}
        else {handleCheckboxChange('null');return false;}
      });
     
      //取消额外组件显示
      setOpenYy(false)
      setOpenXx(false)
    };
    const onCloseJms = () => {
      setOpenJms(false);
    };

    const rootRef = useRef();

    const [selectedCheckbox, setSelectedCheckbox] = useState(null);

  const handleCheckboxChange = (value) => {
    setSelectedCheckbox(value);
  };

    return <PanelLeft>
        <div style={{
            width: 350,
            position: "absolute",
            left: 70,
            top: 30,
            bottom: 30,
            background: 'rgba(1,15,31,0.5)',
            pointerEvents: 'auto',
            borderRadius: 8
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>
                    <div style={{
                        background: `url(${resourcePath.blockTitleBg})`,
                        height: '100%',
                        backgroundSize: '100% 100%',
                        fontSize: 18,
                        lineHeight: '36px',
                        paddingLeft: 12,
                        fontWeight: "bold",
                        overflow: "hidden"
                    }}> 影响范围</div>
                </div>
            </div>
            <div className='fill h0 layout-v '>
                <div className='fill h0 layout-v'>
                    <div className='fill h0 layout-v' style={{
                        padding: 12,
                    }}>
                        <Space>
                            <Radio.Group size='small' value={radius} onChange={e => {
                                setRadius(e.target.value)
                            }} buttonStyle="solid">
                                <Radio.Button value={5}>5km</Radio.Button>
                                <Radio.Button value={10}>10km</Radio.Button>
                                <Radio.Button value={15}>15km</Radio.Button>
                                <Radio.Button value={20}>20km</Radio.Button>
                            </Radio.Group>

                            <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                                width: 120
                            }} onChange={value => {
                                setRadius(value)
                            }} />
                        </Space>
                        <div className='yujin-li'>
                            <ul>
                                <li><p>区县{datas?.find(data=>{return data.mc === '区县'}).ts}</p></li>
                                <li><p>乡镇{datas?.find(data=>{return data.mc === '乡镇'}).ts}</p></li>
                                <li><p>房屋{datas?.find(data=>{return data.mc === '房屋'}).ts}</p> </li>
                                <li><p>人口{datas?.find(data=>{return data.mc === '人口'}).ts}</p></li>
                            </ul>
                        </div>
                    </div>
                    <div style={{ marginBottom:250 }}>
                        <div style={{
                                border: '1px solid #045484',
                                height: '40px',
                                width: '100%'
                            }}>
                               <input id="checkbox1" type="checkbox"  value="option3"
          checked={selectedCheckbox === 'option3'} onClick={showDrawerYy} style={{
                                    position: 'relative',
                                    marginTop: '3%',
                                    width: '100px',
                                    height: '20px',
                                    left: '-20px',
                                    backgroundColor: 'transparent',
                                    border: '1px solid black',
                                }}/>医院
                                 <Drawer mask={false} title="医院" placement="right"  open={openYy}>
                                    {openYy && <Yy />}
                               </Drawer>
                        </div>
                            <div style={{
                                marginTop: '3%',
                                border: '1px solid #045484',
                                height: '40px',
                                width: '100%'
                            }}>
                                <input id="checkbox1" type="checkbox" value="option2"
          checked={selectedCheckbox === 'option2'} onClick={showDrawerXx} style={{
                                    position: 'relative',
                                    marginTop: '3%',
                                    width: '100px',
                                    height: '20px',
                                    left: '-20px',
                                    backgroundColor: 'transparent',
                                    border: '1px solid black',
                                }}/>学校
                                  <Drawer mask={false} title="学校" placement="right"  open={openXx}>
                                   
                                    
                                    {openXx && <Xx />}
                                    
                                  
                               </Drawer>
                            </div>
                            <div style={{
                                marginTop: '3%',
                                border: '1px solid #045484',
                                height: '40px',
                                width: '100%'
                            }}>
                                <input id="checkbox2" type="checkbox" value="option1"
          checked={selectedCheckbox === 'option1'} onClick={showDrawerJms} style={{
                                    position: 'relative',
                                    marginTop: '3%',
                                    width: '100px',
                                    height: '20px',
                                    left: '-20px',
                                    backgroundColor: 'transparent',
                                    border: '1px solid black',
                                }}/>居民所
                                <Drawer mask={false} title="居民所" placement="right"  open={openJms}> 
                                  {openJms && <Jms />}
                               </Drawer>
                            </div>
                    </div>
                </div>
                
            </div>
        </div>
    </PanelLeft> 
}